<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

  
    <div style="" class="box">
      
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">数据看板</div>
      </div> 

      <div style="width: 100%;height: 40vh;text-align: center;margin-top: 10vh;"> 

        
                  
        <div style="margin-top: 1vh;width: 95%;">
          
          <div class="inputBox">
            <div style="padding-top: 1.5vh;">年制氢量</div>
            <div>{{annualHydrogenProduction}}kg</div> 
          </div>
                  
          <div class="inputBox">
            <div style="padding-top: 1.5vh;">平准化制氢成本</div>
            <div>{{priceFor(hpCost)}}元/kg</div> 
          </div>
          
          <div class="inputBox">
            <div style="padding-top: 1.5vh;">项目总投资</div>
            <div>{{priceFor(projectInvest)}}万元</div> 
          </div>
                  
          <div class="inputBox">
            <div style="padding-top: 1.5vh;">项目总成本</div>
            <div>{{priceFor(projectCost)}}万元</div> 
          </div>

        </div>

      </div>
       
    </div>
 
 
  
  <div class="box2">
          
    <div class="titleDiv">
      <div class="barColorBox"></div> 
      <div class="titlefont">平准化制储氢成本明细</div>
    </div> 

    <div id="pieCharts" style="width: 98%;height: 98%;margin: 0 auto;"></div>
  </div>
 
</div>
  
</template>

<script>
  
  import priceUtil from '../../assets/js/priceUtil.js'

  const color = ["#3254DD", "#EF7BE3", "#22E59C", "#F9925A", "#22E5E5"]

  const defaultDatas = [
    { value: 0, name: "投资成本" },
    { value: 0, name: "运维成本" },
    { value: 0, name: "购水成本" },
    { value: 0, name: "购电成本" },
    { value: 0, name: "维护成本" },
    { value: 0, name: "运营成本" },
    { value: 0, name: "其他" }
  ];

var pieOption = {
    color,
    title: { x: "center",
      text: '各成本项占LCOH的比例',
      top:"6%",
      textStyle: {
        color: '#f2f2f2', // 标题字体颜色为黑色
        fontSize: 24, // 标题字体大小为24px
        fontWeight: 'bold', // 标题字体加粗
      },
    },
    
    legend: {
      show: true,
      right: "10%",
      top: "center",
      icon: "rect",
      itemWidth: 16,
      itemHeight: 16,
      width: "150",
      textStyle: {
         //图例文字的样式
         color: "#b4e4ff",
         fontSize: 20,
         // 给出高度和rich对象，实现图标与文字居中对齐
         height: 16,
         rich: {
            a: {
               verticalAlign: "middle",
            },
         },
      },
   },
    tooltip: {
      trigger: "item",
      extraCssText: "width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);",
      formatter: function (params) {
        let str =
          (params.data &&
            `<div style="font-weight: bold;">${params.name}</div>
            <div style="display:flex; justify-content: space-between; align-items: center;">
                <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>占比</span>
                <span>${params.percent}%</span>
            </div>`) ||
          "";
        return str;
      }
    },
     series: [
      {
        type: "pie",
        radius: "60%",
        center: ["50%", "50%"],
        label: {
          normal: {
            formatter: "{xx|{b}：}{c} ",
            rich: {
              xx: {
                fontSize: 14,
                lineHeight: 32
              }
            }
          }
        },
        data: [],
        itemStyle: {
          emphasis: { // 鼠标经过扇形区域时的阴影效果
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        labelLine: {
          normal: {
            length: 5,
            length2: 20,
            smooth: true
          }
        }
      }
    ]
};



  export default {
    name: 'costBreakdown',
    data() {
      return {
        annualHydrogenProduction : "-",
        hpCost : "-",
        projectInvest : "-",
        projectCost : "-",
        schemeId : "",
        projectId : "",

      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.schemeId = this.$route.query.schemeId;
      this.queryPageData();
    },
    methods: {
      
      priceFor : function(price){
        var value = window.priceFor(price);
        return value;
      },
      
      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryCostBreakdown?schemeId='+this.schemeId+"&tableName=ew_cost_breakdown"+"&projectId=").then((res) => {
          var result = res.data;
         
          if(result){
 
            vm.annualHydrogenProduction = result.annualHydrogenProduction;
            vm.hpCost = result.hpCost;
            vm.projectInvest  = result.projectInvest;
            vm.projectCost = result.projectCost;

            var pieData = result.pieData;
 
            var pieJsonData = JSON.parse(pieData);

            let pieCharts = this.$echarts.init(document.getElementById('pieCharts'))
            
            pieCharts.clear(); 

           
            if(pieJsonData){
              pieOption.series[0].data = pieJsonData;
            }else{
              pieOption.series[0].data = defaultDatas;
            }

            pieCharts.setOption(pieOption); 

            window.onresize = function(){
              pieCharts.resize(); 
            }

          }
        }).catch((error) => {
          console.log(error);
        });


      },

       
    }
  }
</script>



<style>

  .titleDiv {
    width: 100%;
    margin: 0.5vh;
    height: 2.5vh; 
    font-weight: bold; 
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 700;
    font-style: normal;
    font-size: 2vh;
    color: #f2f2f2;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
  }
  .barColorBox {
    height: 2.5vh;
    width: 0.7vh;
    border-radius: 1px;
    display: inline-block;
    vertical-align: text-bottom;
    border: none;
    box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
    background-color: #FAFAFA;
    background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
    background-image: -o-linear-gradient(top,#17b4db,#07c968);
    background-image: -ms-linear-gradient(top,#17b4db,#07c968);
    background-image: linear-gradient(top,#17b4db,#07c968);
    background-repeat: repeat-x;
  }

  .titlefont {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 1.8vh;
    padding-left: 5px;
    margin-top: 0vh;
  }


.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 
   .inputBox{
    background-image: url(../../assets/images/infoBackground3.png);
    margin: 1vh auto;
    margin-left: 7vh;
    width: 75%;
    height: 9vh;
    background-repeat: round;
    opacity: 0.8;
    border-radius: 6px;
    font-size: 1vw;
    color: #ffffff;
  }
  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{ 
    width: 23.5%;
    height: 84%;
    position: absolute;
    left: 3vh;
    top: 10vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 72.4%;
    height: 84%;
    position: absolute;
    left: 45vh;
    top: 10vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
